<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="jquery-1.11.2.js"></script>
<meta http-equiv="content-type" content="text/html">
	<title>Simulator</title>
</head>
<body>
	<!--<iframe id="frmFile1" src="gen0.dat" onload="LoadFile1();" style="display: none;"></iframe>-->
	<!--<iframe id="frmFile2" src="path0.dat" onload="LoadFile2();" style="display: none;"></iframe>-->
	<div id="div1" style="display: none;"></div>
	<div id="div2" style="display: none;"></div>
	<script type="text/javascript">
		//read file
		$("#div1").load("gen0.dat");
		$("#div2").load("pth0.dat");
		var canvas = document.createElement("canvas");
		var ctx = canvas.getContext("2d");
		canvas.width = 420;//n+2
		canvas.height = 240;
		document.body.appendChild(canvas);
        

// Background image
//var bgReady = false;
//var bgImage = new Image();
//bgImage.onload = function () {
//	bgReady = true;
//};
//bgImage.src = "images/background.png";
		var dataReady=false;
		var d1r=false,d2r=false;
		var hero = 0;
		var t;
		var dt=0;
		var arrLines;//=new Array(1,2,3,4,5,6);
		var carLines;
		var H=5;
		var iter;
		var carr=[];
		var rarr=[];
		//array of cars
        function update() {
			if (!d2r) {
				//$("#div2").load("path0.dat");
				LoadFile2();
				d2r=true;
			}
			if (!d1r) {
				//$("#div2").load("path0.dat");
				LoadFile1();
				d1r=true;
				canvas.width=(parseInt(carLines[0])+2)*20;
				//load initial car array of size h
			}
			if (!dataReady) dataReady=d1r&&d2r;
			if (dataReady) {
				var dtb=Math.floor(dt/25);
				var dtt=dt/25-dtb;
				//person
				hero=Math.floor(dtt*20*(arrLines[dtb+1]-arrLines[dtb]))+parseInt(arrLines[dtb])*20;
				//cars
				for (var i = 1+dtb; i < carLines.length-1 && i<H+2+dtb; i++) {
					for (var j=0; j<=carLines[0]+1;j++) {
						if (carLines[i].charAt(j)=='X') {
							carr.push({x:j*20,y:((H+1+dtb-i)*40+dtt*40)});
						} else if (carLines[i].charAt(j)=='*') {
							rarr.push({x:j*20,y:((H+1+dtb-i)*40+dtt*40)});
						}
					}
				}
				dt++;
				if (dtb==arrLines.length-2) clearInterval(iter);
			}
			render();
		//update position, see t elapsed, remove cars from array, add to array etc
		}
		function render() {
			//if (bgReady) {
			//	ctx.drawImage(bgImage, 0, 0);
			//}

			//if (heroReady) {
			//	ctx.drawImage(heroImage, hero.x, hero.y);
			//}
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			canvas.width=canvas.width;
			ctx.beginPath();
			for (var j=0; j<carr.length;j++) {
				ctx.rect(carr[j].x+2,carr[j].y+4,16,32);
				ctx.fillStyle="red";
				ctx.fill();
			}
			carr=[];
			ctx.closePath();
			ctx.beginPath();
			for (var j=0; j<rarr.length;j++) {
				ctx.rect(rarr[j].x+5,rarr[j].y+15,10,10);
				ctx.fillStyle="blue";
				ctx.fill();
			}
			rarr=[];
			ctx.closePath();
			ctx.beginPath();
			ctx.rect(hero+5,215,10,10);
			ctx.fillStyle="green";
			ctx.fill();
			ctx.closePath();
			//draw person
			//draw cars
			//if (monsterReady) {
			//ctx.drawImage(monsterImage, monster.x, monster.y);
			//}
		}
		function main() {
			iter=setInterval(update,40);
			

		}
		function LoadFile1() {
    		var oFrame = document.getElementById("div1");
    		var strRawContents = oFrame.innerHTML;
    		while (strRawContents.indexOf("\r") >= 0)
   			     strRawContents = strRawContents.replace("\r", "");
    		carLines = strRawContents.split("\n");
    		//alert("File " + oFrame.src + " has " + arrLines.length + " lines");
    		//for (var i = 0; i < arrLines.length; i++) {
        	//	var curLine = arrLines[i];
        	//	alert("Line #" + (i + 1) + " is: '" + curLine + "'");
    		//}
			//d1r=true;
		}
		function LoadFile2() {
    		var oFrame = document.getElementById("div2");
			var strRawContents = oFrame.innerHTML;
    		while (strRawContents.indexOf("\r") >= 0)
   			     strRawContents = strRawContents.replace("\r", "");
    		arrLines = strRawContents.split("\n");
			t=arrLines.length;
    		//alert("File " + oFrame.src + " has " + arrLines.length + " lines");
    		//for (var i = 0; i < arrLines.length; i++) {
        	//	var curLine = arrLines[i];
        	//	alert("Line #" + (i + 1) + " is: '" + curLine + "'");
    		//}
			//d2r=true;
		}
		main();
    </script>

  

</body>
</html>
